<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/res/back/css/base.css" rel="stylesheet" type="text/css"/>
    <link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        /** 滚动条 **/
        ::-webkit-scrollbar{width: 10px; height: 10px;}
        ::-webkit-scrollbar-button:vertical{display: none;}
        ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
        ::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
        ::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
        ::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}

        #editProductWin td {
            line-height: 30px;
        }

        .excelbtn {
            display: inline-block;
            height: 100%;
            width: 100px;
            background-color: #38A4C7;
            color: #fff;
            text-align: center;
            line-height: 35px;
            cursor: pointer;
            border-radius: 5px;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
            opacity: 0
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div class="panel panel-info panel-content" id="app">
    <div class="panel-heading" style="position: relative;">
        <form id="soform" method="post">
            <table>
                <tr>
                    <td class="w80" style="padding-top: 5px">
                        <label class="center-block">商品名称：</label>
                    </td>
                    <td class="w150 ">
                        <input type="text" class="form-control" placeholder="商品名称" v-model="productName">
                    </td>
                    <td style="padding-left: 10px">
                        <div class="input-group">
								<span class="input-group-btn" style="border: 1px solid #ddd;">
									<button class="btn btn-default" type="button" @click="searchMemberProduct()">搜索</button>
								</span>
                        </div>
                    </td>
                    <td style="padding-left: 10px;font-size: 12px;font-family: inherit;color: inherit;">
                        <span class="excelbtn" @click="showDiscountWin(false)">设置选择商品折扣</span>
                        <span class="excelbtn" @click="showDiscountWin(true)">设置全部商品折扣</span>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    供应商名称: ${company.companyName!}

    <table class="table table-hover table-bordered table-striped table-condensed" v-cloak>
        <thead>
        <tr>
            <th width="50px">
                <input type="checkbox" v-model="checkAll">
            </th>
            <th width="70px">商品ID</th>
            <th>商品名称</th>
            <th>所属类目</th>
            <th width="90px">市场价</th>
            <th width="90px">会员价</th>
            <th width="90px">集采价</th>
            <th width="100px">销售数量</th>
            <th width="100px">销售金额</th>
            <th width="120px">操作</th>
        </tr>
        </thead>
        <tr v-for="product in productList">
            <td align="center">
                <input type="checkbox" v-model="product.checked">
            </td>
            <td align="center">{{ product.id }}</td>
            <td align="center">{{ product.name }}</td>
            <td align="center">{{ product.cateName }}</td>
            <td align="center">{{ product.price }}</td>
            <td align="center">{{ product.mprice }}</td>
            <td align="center">{{ product.cprice }}</td>
            <td align="center"></td>
            <td align="center"></td>
            <td>
                {{ product.discount1 }}
                <button type="button" class="btn btn-info btn-xs delbtn" @click="showDiscountWin(false, product)">设置折扣</button>
            </td>
        </tr>
    </table>

    <div class="panel-footer" v-cloak>
        <button @click="go(page.firstPage)" type="button" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-step-backward"></span>
        </button>
        <button @click="go(page.pageNum - 1)" type="button" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </button>
        &nbsp;{{page.pageNum}}&nbsp;/&nbsp;{{page.pages}}&nbsp;
        <button @click="go(page.pageNum + 1)" type="button" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </button>
        <button @click="go(page.lastPage)" type="button" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-step-forward"></span>
        </button>
        &nbsp;&nbsp;&nbsp;
        <button @click="go(page.pageNum)" type="button" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-refresh"></span>
        </button>
    </div>

    <div style="display: none; width: 800px;" id="editProductWin">
        <div style="border: 1px solid #ddd; max-height: 400px; overflow-y: auto;">
            <table class="table table-hover table-bordered table-striped table-condensed">
                <thead>
                    <tr>
                        <th width="55%">商品名称</th>
                        <th width="10%">市场价</th>
                        <th width="20%">集采价</th>
                        <th width="15%">折扣</th>
                    </tr>
                </thead>
                <tr v-for="product in editProducts">
                    <td>{{ product.name }}</td>
                    <td align="center">￥{{ product.price }}</td>
                    <td align="center">
                        <div class="input-group" :class="{'has-error' : product.cpriceError}">
                            <div class="input-group-addon">￥</div>
                            <input class="form-control input-sm" type="number" placeholder="集采价"
                                   v-model="product.cprice" @keyup="calcDiscount(product)" @blur="calcDiscount(product)"
                                   :title="product.cpriceMsg" style="width: 80px;">
                        </div>
                    </td>
                    <td align="center">
                        <div class="input-group" :class="{'has-error' : product.discountError}">
                            <input class="form-control input-sm" type="number" placeholder="折扣"
                                   v-model="product.discount2" @keyup="calcCprice(product)" @blur="calcCprice(product)"
                                   :title="product.discountMsg" style="width: 80px;">
                            <div class="input-group-addon">%</div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div style="text-align: center; padding-right: 8px; margin-top: 8px;">
            <button type="button" class="btn btn-primary btn-xs" @click="saveDiscount()">确定</button>
        </div>
    </div>
</div>

<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/bootstrap3/jsone/bootstrap.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/layer/layer.js" type="text/javascript"></script>
<script src="/res/common/js/util.js" type="text/javascript"></script>
<script src="/res/common/js/vue.js" type="text/javascript"></script>

<script type="text/javascript">
    var dialog;
    var app = new Vue({
        el: '#app',
        data: {
            productName : '',   //搜索：商品名称
            productList : [],   //查询展示的当前页的商品
            page : {},          //分页对象
            editProducts : []    //设置折扣的商品
        },
        created: function () {
            this.searchMemberProduct();
        },
        computed : {
            checkAll : {
                get : function() {
                    var i = 0;
                    this.productList.forEach(function(product) {
                        if(product.checked) {
                            i++;
                        }
                    });
                    return i == this.productList.length;
                },
                set : function(value) {
                    this.productList.forEach(function(product) {
                        product.checked = value;
                    })
                    return value;
                }
            }
        },
        methods: {
            searchMemberProduct : function(pageNo, pageSize, type) {
                pagNo = pageNo || 1;
                $.ajax({
                    url : '/member/searchMemberProduct.do',
                    type : 'post',
                    dataType : 'json',
                    data : {companyId : '${RequestParameters['companyId']!}', productName : this.productName, pageNo : pageNo, pageSize : pageSize},
                    beforeSend : function() {
                        layer.load(2, {shade: 0.1});
                    },
                    success : function(res) {
                        if(res && res.success && res.obj && res.obj.list) {
                            //计算折扣
                            $.each(res.obj.list, function() {
                                this.checked = false;
                                if(this.price && this.price > 0 && this.cprice && this.cprice > 0) {
                                    this.discount1 = Math.round(div(this.cprice, this.price) * 10 * 100) / 100 + '折';
                                    this.discount2 = Math.round(div(this.cprice, this.price) * 100 * 100) / 100;
                                } else {
                                    this.discount1 = '/';
                                    this.discount2 = '';
                                }
                            });
                            if(type && type == 'win') {
                                //用于设置全部商品折扣弹框
                                app.editProducts = res.obj.list;
                            } else {
                                //用于主列表
                                app.productList = res.obj.list;
                                delete res.obj.list;    //移除list属性，只保留分页相关属性
                                app.page = res.obj;
                            }
                        }
                    },
                    complete : function() {
                        layer.closeAll('loading');
                    }
                });
            },
            go : function(pageNo) {
                pagNo = pageNo || 1;
                if(pageNo >= this.page.firstPage && pageNo <= this.page.lastPage && this.page.pageNum != pageNo) {
                    this.searchMemberProduct(pageNo);
                }
            },
            showDiscountWin : function(all, product) {
                this.editProducts = [];
                if(product) {
                    //点击操作栏中设置折扣按钮
                    app.editProducts.push(JSON.parse(JSON.stringify(product)));     //深拷贝对象
                } else {
                    if (!all) {
                        //只设置选中的商品的折扣
                        this.productList.forEach(function (product) {
                            if (product.checked) {
                                app.editProducts.push(JSON.parse(JSON.stringify(product)));     //深拷贝对象
                            }
                        });
                        if(this.editProducts.length == 0) {
                            alert("请选择商品");
                            return;
                        }
                    } else {
                        //todo 设置所有商品的折扣
                        this.searchMemberProduct(this.page.firstPage, 999999, 'win');
                    }
                }

                dialog = art.dialog({
                    title : "折扣设置",
                    lock : true,
                    top : '10%',
                    content : document.getElementById('editProductWin')
                });
            },
            //根据集采价计算折扣
            calcDiscount : function(product) {
                var newCprice = Number(product.cprice);
                if(newCprice && newCprice > 0 && newCprice <= product.price && /^([1-9]\d*|0)(\.\d{1,2})?$/.test(newCprice)) {
                    product.cpriceError = false;
                    product.cpriceMsg = '';
                } else {
                    product.cpriceError = true;
                    product.cpriceMsg = '请输入正确的集采价';
                }
                product.discountError = false;
                product.discountMsg = '';

                if(!product.cpriceMsg && product.price && product.price > 0) {
                    product.discount2 = Math.round(div(newCprice, product.price) * 100 * 100) / 100;
                } else {
                    product.discount2 = "";
                }
            },
            //根据折扣计算集采价
            calcCprice : function (product) {
                var newDiscount = Number(product.discount2);
                if(newDiscount && newDiscount > 0 && newDiscount < 100 &&  /^([1-9]\d*|0)(\.\d{1,2})?$/.test(newDiscount)) {
                    product.discountError = false;
                    product.discountMsg = '';
                } else {
                    product.discountError = true;
                    product.discountMsg = '请输入正确的折扣';
                }
                product.cpriceError = false;
                product.cpriceMsg = '';

                if(!product.discountError && product.price && product.price > 0) {
                    product.cprice = Math.round(mul(product.price, newDiscount) * 0.01 * 100) / 100;
                } else {
                    product.cprice = "";
                }
            },
            //保存折扣
            saveDiscount : function() {
                var data = [];
                var hasError = false;
                this.editProducts.forEach(function(product) {
                    if(product.cpriceError || product.discountError) {
                        hasError = true;
                    }

                    var obj = {};
                    obj.productId = product.id;
                    obj.price = product.price;
                    obj.cprice = product.cprice;
                    data.push(obj);
                });
                if(!hasError) {
                    $.ajax({
                        url : '/member/saveMemberProductPrice.do',
                        type : 'post',
                        data : {data : JSON.stringify(data)},
                        dataType : 'json',
                        beforeSend : function() {
                            layer.load(2, {shade: 0.1});
                        },
                        success : function(res) {
                            if(res && res.success) {
                                layer.msg('操作成功');
                                app.searchMemberProduct(app.page.pageNum);
                                dialog.close();
                            } else {
                                alert('操作失败');
                            }
                        },
                        complate : function() {
                            layer.closeAll('loading');
                        }
                    });
                }
            }
        }
    });
</script>
</body>
</html>